$(function () {
  var swidth = $("#focus").width();
  var len = $("#focus ul li").length;
  var index = 0;
  var pictimer;

  var btn =
    "<div class='btnbg'><img class='imgleft' src='r/cms/www/default/img/toleft.png' alt=''/><span class='spanleft'><span class='spanl'></span>/<span class='spanr'></span></span><span class='kong'></span><img class='imgright' style='transform:rotatey(180deg);' src='r/cms/www/default/img/toleft.png' alt=''/></div>";
  $("#focus").append(btn);
  // 背景
  $("#focus .btnbg").css({
    background: "rgba(0, 0, 0,0.5)",
    display: "flex",
    "align-items": "center",
    "justify-content": "space-between",
    padding: "0 10px",
    "box-sizing": "border-box",
  });
  $(".btnbg .kong").css("width", "84%");
  $(".spanleft").css({
    color: "#fff",
    "font-family": "微软雅黑",
    "font-size": "18px",
  });
  $(".spanleft .spanl").css("font-size", "24px");
  $("#focus ul li p").css({
    position: "absolute",
    bottom: "13px",
    width: "480px",
    height:"40px",
    left: "80px",
		"line-height":"48px",
    "text-align": "center",
    "font-family": "微软雅黑",
    color: "#fff",
    "font-size": "18px",
    overflow: "hidden",
    "text-overflow": "ellipsis",
    "white-space": "nowrap",
    "z-index": "999",
  });
  $("#focus .btnbg img").css("cursor", "pointer");
  $(".btnbg .spanr").text(len);
  $("#focus .btnbg .spanl").text(index + 1);

  // $("#focus .btn span").mouseenter(function () {
  //     index = $("#focus .btn span").index(this);
  //     showpics(index);
  // }).eq(0).trigger("mouseenter");

  $("#focus ul").css("width", swidth * (len + 1));

  $("#focus")
    .hover(
      function () {
        clearinterval(pictimer);
      },
      function () {
        pictimer = setinterval(function () {
          $("#focus .btnbg .spanl").text(index + 1);
          if (index == len) {
            showfirpic();
            index = 0;
            $("#focus .btnbg .spanl").text(1);
          } else {
            showpics(index);
          }
          index++;
        }, 3000);
      }
    )
    .trigger("mouseleave");

  // setinterval(function(){
  //     console.log(index);
  // },3000)

  function showpics(index) {
    var nowleft = -index * swidth;
    $("#focus ul").stop(true, false).animate({ left: nowleft }, 500);
    $("#focus .btn span").removeclass("on").eq(index).addclass("on");
  }

  function showfirpic() {
    $("#focus ul").append($("#focus ul li:first").clone());
    var nowleft = -len * swidth;
    console.log(nowleft, "距离");
    $("#focus ul")
      .stop(true, false)
      .animate({ left: nowleft }, 0, function () {
        $("#focus ul").css("left", "0");
        $("#focus ul li:last").remove();
      });
    $("#focus .btn span").removeclass("on").eq(0).addclass("on");
  }

  $(".imgright").click(function () {
    if (index === len - 1) {
      index = -1;
      showfirpic();
    } else {
      $("#focus ul")
        .stop()
        .animate({ left: -index * swidth - swidth }, 500);
    }
    if (index == -1) {
      console.log(index);
    } else {
    }
    $("#focus .btnbg .spanl").text(index + 2);

    index++;
    // console.log(index);
    // console.log(len);
  });
  $(".imgleft").click(function () {
    console.log(index);
    if (index === 0) {
      index = 5;
      $("#focus ul").append($("#focus ul li:first").clone());
      var nowleft = -index * swidth + swidth;
      // var nowleft = -len * swidth;
      console.log(nowleft, "距离");
      $("#focus ul")
        .stop(true, false)
        .animate({ left: nowleft }, 0, function () {
          $("#focus ul").css("left", nowleft);
          $("#focus ul li:last").remove();
        });
      $("#focus .btn span").removeclass("on").eq(0).addclass("on");
    } else {
      console.log(-index * swidth + swidth);
      $("#focus ul")
        .stop()
        .animate({ left: -index * swidth + swidth }, 500);
      $("#focus .btnbg .spanl").text(index);
    }
    $("#focus .btnbg .spanl").text(index);
    index--;
  });
});